<template>
    <div class="app-container">
        <vxe-grid ref="xGrid" v-bind="gridOptions">
            <template #toolbar_buttons>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dept:add']">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
                    </el-col>
                </el-row>
            </template>
            <template #slotStatus="{ row }">
                <dict-tag :options="sys_normal_disable" :value="row.status" />
            </template>
            <template #action="{ row }">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:dept:edit']">修改</el-button>
                <el-button link type="primary" icon="Plus" @click="handleAdd(row)" v-hasPermi="['system:dept:add']">新增</el-button>
                <el-button v-if="row.children.length <= 0" link type="primary" icon="Delete" @click="handleDelete(row)" v-hasPermi="['system:dept:remove']">删除</el-button>
            </template>
        </vxe-grid>

        <!-- 添加或修改部门对话框 -->
        <el-dialog :title="title" v-model="open" width="600px" append-to-body>
            <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24" v-if="form.parentId !== 0">
                        <el-form-item label="上级部门" prop="parentId">
                            <el-tree-select
                                v-model="form.parentId"
                                :data="deptOptions"
                                :props="{
                                    value: 'deptId',
                                    label: 'deptName',
                                    children: 'children',
                                }"
                                value-key="deptId"
                                placeholder="选择上级部门"
                                check-strictly
                                :render-after-expand="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门名称" prop="deptName">
                            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum">
                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人" prop="leader">
                            <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门状态">
                            <el-radio-group v-model="form.status">
                                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="Dept">
    import { reactive, getCurrentInstance, ref, toRefs, nextTick } from "vue";
    import { listDept, listDeptTree, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
    import { VxeGridInstance, VxeGridProps, VxeGridListeners } from "../../../../types/index";
    import XEUtils from "xe-utils";
    const { proxy } = getCurrentInstance() as any;
    const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
    const open = ref(false);
    const title = ref("");
    const deptOptions = ref<any[]>([]);
    const isExpandAll = ref(true);
    const data: any = reactive({
        form: {},
        rules: {
            parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
            deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
            orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
            email: [
                {
                    type: "email",
                    message: "请输入正确的邮箱地址",
                    trigger: ["blur", "change"],
                },
            ],
            phone: [
                {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur",
                },
            ],
        },
    });

    const { form, rules } = toRefs(data);

    const xGrid = ref({} as VxeGridInstance);
    const gridOptions = reactive<VxeGridProps>({
        border: true,
        resizable: true,
        showHeaderOverflow: true,
        showOverflow: true,
        highlightHoverRow: true,
        keepSource: true,
        id: "17",
        height: "auto",
        rowId: "deptId",
        formConfig: {
            titleWidth: 100,
            titleAlign: "right",
            items: [
                {
                    field: "deptName",
                    title: "部门名称",
                    span: 5,
                    itemRender: { name: "$input", props: { placeholder: "请输入部门名称" } },
                },
                {
                    field: "status",
                    title: "状态",
                    span: 5,
                    itemRender: {
                        name: "$select",
                        options: sys_normal_disable,
                    },
                },
                {
                    itemRender: {
                        name: "$buttons",
                        children: [
                            {
                                props: {
                                    type: "submit",
                                    content: "查询",
                                    status: "primary",
                                },
                            },
                            {
                                props: {
                                    type: "reset",
                                    content: "重置",
                                },
                            },
                        ],
                    },
                },
            ],
        },
        toolbarConfig: {
            refresh: true,
            zoom: true,
            custom: true,
            slots: {
                buttons: "toolbar_buttons",
            },
        },
        rowConfig: {
            isCurrent: true,
        },
        proxyConfig: {
            form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
            ajax: {
                // 接收 Promise
                query: ({ form, params }: any) => {
                    const queryParams: any = Object.assign({}, form);
                    return listDeptTree({
                        ...queryParams,
                        ...params,
                    }).then((response) => {
                        return response.data;
                    });
                },
            },
        },
        treeConfig: {
            transform: false,
            rowField: "deptId",
            parentField: "parentId",
            expandAll: true,
            children: "children",
        },
        columnConfig: {
            resizable: true,
        },
        columns: [
            {
                field: "deptName",
                title: "部门名称",
                treeNode: true,
            },
            {
                field: "orderNum",
                title: "排序",
            },
            {
                field: "status",
                title: "状态",
                slots: {
                    default: "slotStatus",
                },
            },
            {
                field: "createTime",
                title: "创建时间",
                formatter({ cellValue }: any) {
                    return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:ss:mm");
                },
            },
            {
                title: "操作",
                width: 220,
                align: "center",
                fixed: "right",
                slots: { default: "action" },
            },
        ],
    });
    /** 取消按钮 */
    function cancel() {
        open.value = false;
        reset();
    }
    /** 表单重置 */
    function reset() {
        form.value = {
            deptId: undefined,
            parentId: undefined,
            deptName: undefined,
            orderNum: 0,
            leader: undefined,
            phone: undefined,
            email: undefined,
            status: "0",
        };
        proxy.resetForm("deptRef");
    }
    /** 新增按钮操作 */
    function handleAdd(row: any) {
        reset();
        listDept().then((response) => {
            deptOptions.value = proxy.handleTree(response.data, "deptId");
        });
        if (row != undefined) {
            form.value.parentId = row.deptId;
        }
        open.value = true;
        title.value = "添加部门";
    }
    /** 展开/折叠操作 */
    function toggleExpandAll() {
        isExpandAll.value = !isExpandAll.value;
        xGrid.value.setAllTreeExpand(isExpandAll.value);
    }
    /** 修改按钮操作 */
    function handleUpdate(row: any) {
        reset();
        listDeptExcludeChild(row.deptId).then((response) => {
            deptOptions.value = proxy.handleTree(response.data, "deptId");
        });
        getDept(row.deptId).then((response) => {
            form.value = response.data;
            open.value = true;
            title.value = "修改部门";
        });
    }
    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["deptRef"].validate((valid: any) => {
            if (valid) {
                if (form.value.deptId != undefined) {
                    updateDept(form.value).then((response) => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        xGrid.value.commitProxy("reload");
                    });
                } else {
                    addDept(form.value).then((response) => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        xGrid.value.commitProxy("reload");
                    });
                }
            }
        });
    }
    /** 删除按钮操作 */
    function handleDelete(row: any) {
        proxy.$modal
            .confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
            .then(function () {
                return delDept(row.deptId);
            })
            .then(() => {
                xGrid.value.commitProxy("reload");
                proxy.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
    }
</script>
